<template>
  <div>
    <!-- 面包屑 -->
    <div class="crumber">
      <Crumber />
    </div>
    <div class="content-box">
      <Table :data='resData' :title="title" @paginate="paginatefn" />
    </div>
  </div>
</template>
  
<script setup lang='ts'>
import Crumber from '@/components/crumber/Crumber.vue'
import Table from '@/components/tabel/Table.vue'
import * as http from '@/request/api'
import { reactive, ref, toRefs } from 'vue';
import type { ITitle } from '#/global'

const params: AdminListParams = reactive({
  keyword: '',
  pageNum: 1,
  pageSize: 10
})

const title: ITitle = {
  id: "编号",
  username: "账号",
  nickName: "姓名",
  email: "邮箱",
  createTime: "添加时间",
  loginTime: "最后登陆",
  status: "是否启用",
  admin_edit: "操作"
}

// 封装请求数据
function getdata(params: AdminListParams) {
  http.admin.AdminList(params).then((res) => {
    resData.value = res.data
    resData.value.list.map(item => {
      item.createTime = item.createTime?.slice(0, 16).replace('T', ' ');
      item.loginTime = item.loginTime?.slice(0, 16).replace('T', ' ')
      return item
    })
  })
}

// 用户列表数据
const state = reactive<{ resData: AdminListRespone }>({
  resData: {
    list: [],
    pageNum: 1,
    pageSize: 10,
    total: 0,
    totalPage: 0
  }
})
const { resData } = toRefs(state)
getdata(params)

// 切换分页
const paginatefn = (value: number) => {
  console.log(value);
  params.pageNum = value;
  getdata(params)
}


</script>
  
<style>
.crumber {
  padding: 18px;
  border-bottom: 1px solid rgb(235, 232, 232);
}

.content-box {
  padding: 10px;
  box-sizing: border-box;
  height: 590px;
  overflow: auto;
  overflow-x: hidden;
}
</style>